import React, {FC, useState} from "react";
// @ts-ignore
import style from "./QuestioCard.module.scss";
import {Button, Divider, message, Modal, Popconfirm, Space, Tag} from "antd";
import {Link, useNavigate} from "react-router-dom";
import {
    CopyOutlined,
    DeleteOutlined,
    EditOutlined,
    ExclamationCircleOutlined,
    LineChartOutlined,
    StarOutlined,
} from "@ant-design/icons";
import {useRequest} from "ahooks";
import {duplicateQuestionService, updateQuestionService,} from "../service/question";

type PropsType = {
  _id: string;
  title: string;
  isPublished: boolean;
  isStar: boolean;
  answerCount: number;
  createAt: string;
};
const {confirm} = Modal;
const QuestionCard: FC<PropsType> = (props) => {
  const {_id, title, isPublished, isStar, answerCount, createAt} = props;
  const [isStartState, setisStartState] = useState(isStar);
  const [isDelState, setIsDelState] = useState(false);
  const nav = useNavigate();
  const {run: changeStar, loading: changeStarLoading} = useRequest(
    async () => {
      const data = await updateQuestionService(_id, {isStar: isStartState});
      return data;
    },
    {
      manual: true,
      onSuccess(result) {
        setisStartState(!isStartState);
        message.success("已更新");
      },
    }
  );
  const {loading: duplicateLoading, run: duplicate} = useRequest(
    async () => {
      const data = await duplicateQuestionService(_id);
      return data;
    },
    {
      manual: true,
      onSuccess(result) {
        console.log("result", result);
        nav(`/question/edit/${result.id}`);
        message.success("复制完成");
      },
    }
  );
  // 删除函数
  const {loading: delQuestionLoading, run: del} = useRequest(async () => {
    await updateQuestionService(_id, {isDeleted: true})
  }, {
    manual: true,
    onSuccess(result) {
      message.success("删除成功")
      setIsDelState(true)
    }
  })
  const delQuestionCard = () => {
    confirm({
      title: "确定删除此问卷？",
      icon: <ExclamationCircleOutlined/>,
      onOk: () => {
        del()
      },
    });
  }
  const edit = () => {
    nav(`/question/edit/${_id}`)
  }

  if (isDelState) {
    return null
  }
  return (
    <div className={style.container}>
      <div className={style.title}>
        <div className={style.left}>
          <Space>
            <Link
              to={
                isPublished ? `/question/stat/${_id}` : `/question/edit/${_id}`
              }
            >
              {isStartState ? <StarOutlined style={{color: "red"}}/> : ""}
              {title}
            </Link>
          </Space>
        </div>
        <div className={style.right}>
          <Space>
            {isPublished ? (
              <Tag color="processing">已发布</Tag>
            ) : (
              <Tag>未发布</Tag>
            )}
            <span>答卷：{answerCount}</span>
            <span>{createAt}</span>
          </Space>
        </div>
      </div>
      <Divider/>
      <div className={style["button-container"]}>
        <div className={style.left}>
          <Space>
            <Button type={"text"} onClick={edit} icon={<EditOutlined/>}>
              编辑问卷
            </Button>
            <Button
              icon={<LineChartOutlined/>}
              disabled={isPublished}
              type={"text"}
            >
              数据统计
            </Button>
          </Space>
        </div>
        <div className={style.right}>
          <Space>
            <Button
              type={"text"}
              size={"small"}
              onClick={changeStar}
              disabled={changeStarLoading}
            >
              {isStartState ? "取消标星" : "标星"}
            </Button>
            <Popconfirm
              title={"确定复制该问卷"}
              okText={"确定"}
              cancelText={"删除"}
              onConfirm={duplicate}
            >
              <Button
                type={"text"}
                disabled={duplicateLoading}
                size={"small"}
                icon={<CopyOutlined/>}
              >
                复制
              </Button>
            </Popconfirm>
            <Button type={"text"} size={"small"} icon={<DeleteOutlined/>} onClick={delQuestionCard}
                    disabled={delQuestionLoading}>
              删除
            </Button>
          </Space>
        </div>
      </div>
    </div>
  );
};

export default QuestionCard;
